<template>
  <div class="box">
    <div class="logo">饿了么</div>
    <div class="choiceList">
      <div v-for="(item, index) in choiceList" :key="index" :class="{ checked: pindex == index }"
        @click="changeStatus(index)">
        <div class="name">{{ item.name }}</div>
        <div class="xian"></div>
      </div>
    </div>
  </div>
  <!-- ----------------------         列表          ------------------- -->
  <div class="list">
    <div :class="{ checked: pindex == index }" v-for="(item, index) in list" :key="index">

      <div class="namebox">
        <div class="name">{{ item.name }}</div>
        <span class="status">{{ item.status }}</span>
      </div>

      <div class="imgbox">
        <img :src="item.image1" alt="">
        <div class="price">
          <div>￥{{ item.price }}</div>
          <div>共{{ index + 1 }}件</div>
          <button>再来一单</button>
        </div>

      </div>
    </div>
  </div>

</template>
  
<script setup>
import { ref} from 'vue'
var pindex = 0;
var choiceList = ref([
  { name: "全部", status: false },
  { name: "待消费", status: false },
  { name: "待评价", status: false },
  { name: "退款", status: false },
])
var list = ref([
  { name: "纯手工饺子（凤城九路店）", status: "已送达", price: 17.8, pic: 'image1' },
  { name: "唐久便利（海荣名城店）", status: "已送达", price: 18.3, pic: "image2" },
  { name: "美益水果（北美店）", status: "已送达", price: 28.89, pic: "image3" },
  { name: "美益水果（北美店）", status: "已送达", price: 28.89, pic: "image4" },

])
var changeStatus = (index) => { //更改任务状态, item参数就是 当前点击的任务对象
  this.pindex = index
}
</script>
  
<style scoped>
.box {
    height: 10%;
    box-sizing: border-box;
    padding: 10px;
}

.box .logo {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.box .choiceList {
    display: flex;
}

.box .choiceList div {
    display: flex;
    flex-direction: column;
    padding: 3px 6px;
    cursor: pointer;
    align-items: center;
}

.box .choiceList div.checked {
    color: #51b3f7;
}

.box .choiceList div.checked .xian {
    width: 15px;
    border-bottom: 3px solid #51b3f7;
}

/* ---------------------------------------------- */
.list {
    box-sizing: border-box;
    height: 90%;
    width: 100%;
    padding: 10px;

}

::-webkit-scrollbar {
    width: 0
}

.list>div {
    height: 110px;
    margin-bottom: 5px;
    background-color: white;
    padding: 5px;
    border-radius: 10px;
}

.list div .namebox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5px;

}

.list div .namebox .name {
    font-weight: 700;

}

.list div .namebox .status {
    font-size: 12px;
    color: grey;

}

.list div .imgbox {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.list div .imgbox img {
    width: 80px;
}

.list div .imgbox .price div:nth-child(1) {
    font-weight: 700;
}

.list div .imgbox .price div:nth-child(2) {
    font-size: 12px;
    color: grey;
}


.list div .price button {
    border: 1px solid #53c6f2;
    padding: 3px 5px;
    border-radius: 15px;
    font-size: 12px;
    color: #53c6f2;
    background-color: white;
}
</style>